<template>
  <div class="order-detail-main">
    <el-row :guttar="20">
      <el-col :span="12" :offset="6">
        <el-steps :active="active" finish-status="success" class="steps">
          <el-step title="未付款" :description="orderListInfo.addTime" />
          <el-step title="已付款" :description="orderListInfo.payTime" />
          <el-step title="已发货" :description="orderListInfo.sendTime" />
          <el-step title="已收货" :description="orderListInfo.receiveTime" />
          <el-step title="申请退款" :description="orderListInfo.doneTime" />
        </el-steps>
      </el-col>
    </el-row>
    <el-card class="card" shadow="never">
      <div slot="header">
        <span>订单状态:</span>
        <svg-icon
          v-if="orderListInfo.statusend == '1'"
          icon-class="processdone"
          class="status"
        />
        <svg-icon
          v-if="orderListInfo.statusend == '0'"
          icon-class="statusing"
          class="status"
        />
      </div>
      <el-row :guttar="20">
        <div class="orderinfo">
          <span class="infos" style="font-weight:bolder">基本信息:</span>
          <div class="orderenter">
            <el-col :span="4">
              <div class="orderinfo-top">订单编号</div>
              <div class="orderinfo-bottom">{{ orderListInfo.orderId }}</div>
            </el-col>
            <el-col :span="4">
              <div class="orderinfo-top">用户账户</div>
              <div class="orderinfo-bottom">{{ orderListInfo.username }}</div>
            </el-col>
            <el-col :span="4">
              <div class="orderinfo-top">订单金额</div>
              <div class="orderinfo-bottom">{{ orderListInfo.price }}</div>
            </el-col>
            <el-col :span="4">
              <div class="orderinfo-top">订单数量</div>
              <div class="orderinfo-bottom">{{ orderListInfo.count }}</div>
            </el-col>
            <el-col :span="4">
              <div class="orderinfo-top">订单状态</div>
              <div class="orderinfo-bottom">
                {{ orderListInfo.orderStatus }}
              </div>
            </el-col>
            <el-col :span="4">
              <div class="orderinfo-top">下单时间</div>
              <div class="orderinfo-bottom">{{ orderListInfo.addTime }}</div>
            </el-col>
            <el-col :span="4">
              <div class="orderinfo-top">付款时间</div>
              <div class="orderinfo-bottom">{{ orderListInfo.payTime }}</div>
            </el-col>
            <el-col :span="4">
              <div class="orderinfo-top">发货时间</div>
              <div class="orderinfo-bottom">{{ orderListInfo.sendTime }}</div>
            </el-col>
            <el-col :span="4">
              <div class="orderinfo-top">收货时间</div>
              <div class="orderinfo-bottom">
                {{ orderListInfo.receiveTime }}
              </div>
            </el-col>
            <el-col :span="4">
              <div class="orderinfo-top">退单时间</div>
              <div class="orderinfo-bottom">{{ orderListInfo.backTime }}</div>
            </el-col>
            <el-col :span="4">
              <div class="orderinfo-top">结束时间</div>
              <div class="orderinfo-bottom">{{ orderListInfo.doneTime }}</div>
            </el-col>
            <el-col :span="4">
              <div class="orderinfo-top">其他</div>
              <div class="orderinfo-bottom" />
            </el-col>
          </div>
        </div>
      </el-row>

      <el-row :guttar="20">
        <div class="orderUserInfo">
          <span class="infos" style="font-weight:bolder">收货人信息:</span>
          <div class="userinfo">
            <el-col :span="4">
              <div class="userinfo-top">用户名</div>
              <div class="userinfo-bottom">{{ userInfo.username }}</div>
            </el-col>
            <el-col :span="4">
              <div class="userinfo-top">收货人</div>
              <div class="userinfo-bottom">{{ userInfo.name }}</div>
            </el-col>
            <el-col :span="4">
              <div class="userinfo-top">手机号码</div>
              <div class="userinfo-bottom">{{ userInfo.tel }}</div>
            </el-col>
            <el-col :span="4">
              <div class="userinfo-top">邮政编码</div>
              <div class="userinfo-bottom">{{ userInfo.cityCode }}</div>
            </el-col>
            <el-col :span="4">
              <div class="userinfo-top">地市</div>
              <div class="userinfo-bottom">{{ userInfo.cityStr }}</div>
            </el-col>
            <el-col :span="4">
              <div class="userinfo-top">详细地址</div>
              <div class="userinfo-bottom">{{ userInfo.cityBak }}</div>
            </el-col>
          </div>
        </div>
      </el-row>

      <el-row :guttar="20">
        <div class="orderDetailinfo" style="margin-top:20px;">
          <span class="infos" style="font-weight:bolder">商品信息:</span>
          <div class="detailinfo">
            <el-table :data="orderDetail" border style="width: 100%">
              <el-table-column
                align="center"
                fixed
                type="index"
                label="#"
                width="100"
              />
              <el-table-column align="center" label="商品图片" width="200">
                <template slot-scope="scope">
                  <img :src="scope.row.cover_img">
                </template>
              </el-table-column>
              <el-table-column align="center" label="商品名称" width="220">
                <template slot-scope="scope">
                  <p>{{ scope.row.gname }}</p>
                  <p>
                    品牌:{{ scope.row.brandEname }}|{{ scope.row.brandName }}
                  </p>
                </template>
              </el-table-column>
              <el-table-column align="center" label="价格货号" width="220">
                <template slot-scope="scope">
                  <p>价格:{{ scope.row.price }}</p>
                  <p>货号:{{ scope.row.sku_code }}</p>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="color"
                label="型号"
                width="200"
              />
              <el-table-column align="center" label="是否退货" width="100">
                <template slot-scope="scope">
                  <div>
                    <p v-if="scope.row.backId">是</p>
                    <p v-else>否</p>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="count"
                label="数量"
                width="200"
              />
              <el-table-column align="center" label="小计" width="200">
                <template slot-scope="scope">
                  <p>￥{{ (scope.row.count * scope.row.price) / 100 }}</p>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-row>

      <div class="count">
        <span>合计:</span><span style="color:red">￥{{ totalPrice }}</span>
      </div>

      <el-row :guttar="20">
        <div class="costinfo">
          <span class="infos" style="font-weight:bolder">费用信息:</span>
          <div class="costinfos">
            <el-col :span="6">
              <div class="costinfos-top">商品合计</div>
              <div class="costinfos-bottom">￥{{ totalPrice }}</div>
            </el-col>
            <el-col :span="6">
              <div class="costinfos-top">运费</div>
              <div class="costinfos-bottom">0</div>
            </el-col>
            <el-col :span="6">
              <div class="costinfos-top">订单金额</div>
              <div class="costinfos-bottom">￥{{ totalPrice }}</div>
            </el-col>
            <el-col :span="6">
              <div class="costinfos-top">实付款</div>
              <div class="costinfos-bottom">￥{{ totalPrice }}</div>
            </el-col>
          </div>
        </div>
      </el-row>
    </el-card>
    <!-- 流程说明 客户端未付款0 ==> 客户端付款1==> 服务端发货2 ==> 客户端收货3 (申请退款9)==> 服务端关闭(statusend:1) -->
    <!-- 如果商家没有发货 当前状态是1  应该显示 已发货按钮
        如果商家发货成功 客户还没有收到货物 商家等待,不能操作
      如果客户确认收货,商家可以关闭订单-->
    <el-button
      v-if="active == 2"
      class="el-button"
      style="margin-top: 12px;"
      type="primary"
      @click="sendOrder"
    >已发货</el-button>
    <el-button
      v-if="active == 3"
      class="el-button"
      disabled
      type="primary"
    >等待客户收货...</el-button>
    <el-button
      v-if="active == 4 && this.orderListInfo.statusend == '0'"
      class="el-button"
      type="primary"
      @click="closeshop"
    >关闭订单</el-button>
    <!-- 前提: 由于退单导致 客户端无法操作"确认收货" ,具体场景参考 后台=>订单管理=> 后台强制确认收货 api说明文档 -->
    <!-- <el-button type="primary" ></el-button> -->
  </div>
</template>

<script>
import {
  orderDetail,
  orderList,
  orderUserInfo,
  sendDone,
  closeOrder
} from '@/api/order/index'
export default {
  name: 'Orderdetail',
  data() {
    return {
      id: '',

      page: {
        start: 1,
        limit: 10
      },
      orderListInfo: '', // 订单基本信息
      orderId: '', // 订单id
      orderDetail: [], // 商品详情信息
      userInfo: [] // 用户基本信息
    }
  },
  computed: {
    totalPrice() {
      var totalPrice = this.orderDetail.reduce((a, b) => {
        a += (b.count * b.price) / 100
        return a
      }, 0)
      return totalPrice
    },
    active() {
      if (this.orderListInfo.statusend === '1') {
        return 4
      } else {
        return parseInt(this.orderListInfo.orderStatus) + 1
      }
    }
  },
  created() {
    console.log(this.$route.params.orderId)
    this.getOrderDetail()
    this.getOrderlist()
    this.getOrderUserInfo()
  },
  methods: {
    // 已发货
    sendOrder() {
      this.orderId = this.$route.params.orderId
      sendDone({
        id: this.orderId
      }).then(res => {
        console.log(res)
        if (res.code === 'S') {
          window.location.reload()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 关闭订单
    closeshop() {
      this.orderId = this.$route.params.orderId
      closeOrder({
        id: this.orderId
      }).then(res => {
        console.log(res)
        if (res.code === 'S') {
          window.location.reload()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 强制确认收货

    // 订单详情列表
    getOrderDetail() {
      this.id = this.$route.params.orderId
      orderDetail({
        orderId: this.id
      }).then(res => {
        console.log('商品信息', res)
        this.orderDetail = res.data
      })
    },
    // 订单列表
    getOrderlist() {
      this.id = this.$route.params.orderId
      orderList({
        orderId: this.id
      }).then(res => {
        console.log('基本信息', res)
        this.orderListInfo = res.data.list[0]
        // this.orderId = res.data.list[0].orderId;
      })
    },
    // 订单用户信息
    getOrderUserInfo() {
      this.id = this.$route.params.orderId
      orderUserInfo({
        orderId: this.id
      }).then(res => {
        console.log('收货人信息', res)
        this.userInfo = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.steps {
  margin-top: 20px;
}
.card {
  margin: 30px;
}
::v-deep .status {
  font-size: 40px;
}

.orderinfo {
  // border: 1px solid black;
  .infos {
    display: block;
    margin: 20px;
  }
  .orderenter {
    // border: 1px solid black;
    .orderinfo-top {
      background: #f5f7fa;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border: 1px solid #dcdfe6;
    }
    .orderinfo-bottom {
      height: 60px;
      text-align: center;
      line-height: 60px;
      border: 1px solid #dcdfe6;
    }
  }
}

.orderUserInfo {
  margin-top: 30px;
  .infos {
    margin: 10px;
  }
  .userinfo {
    margin-top: 20px;
    .userinfo-top {
      background: #f5f7fa;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border: 1px solid #dcdfe6;
    }
    .userinfo-bottom {
      height: 60px;
      text-align: center;
      line-height: 60px;
      border: 1px solid #dcdfe6;
    }
  }
}
.orderDetailinfo {
  margin-top: 20px;
  .infos {
    display: block;
    margin: 30px 20px 20px 10px;
  }
}
img {
  width: 100px;
  height: 100px;
}
.count {
  margin-top: 20px;
  margin-right: 20px;
  text-align: right;
}
.costinfo {
  margin-top: 30px;
  .infos {
    margin: 10px;
  }
  .costinfos {
    margin-top: 20px;
    .costinfos-top {
      background: #f5f7fa;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border: 1px solid #dcdfe6;
    }
    .costinfos-bottom {
      height: 60px;
      text-align: center;
      line-height: 60px;
      border: 1px solid #dcdfe6;
    }
  }
}
.el-button {
  display: block;
  margin: 20px auto;
}
</style>
